<!DOCTYPE html>
<html>
<head>
	<title>CSS 3.0 study guide</title>
</head>
<style type="text/css">
	:target {
		border: 2px solid #ededed;
		background-color: #e5eecc;
	}

	.not :not(.not-1) {
		background-color: red;

	}

	.shadow-1 {
		text-shadow: 0 0 5px #ff0000;
		color: #fff;
		font-size: 24px;
	}
	.shadow-2 {
		text-shadow: 2px 2px 4px #000;
		color: #fff;
		font-size: 24px;
	}
	.stroke {
		color: #fff;
		text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
		font-size: 24px;
	}
	.columns {
		column-count: 3;
		column-gap: 24px;
		column-rule: 1px dashed black;
	}

	.background-img {
		background: url(http://img4.duitang.com/uploads/item/201410/14/20141014151107_hJ2me.jpeg) no-repeat;
		background-size: cover;
		height: 320px;
		width: 200px;
		border: 1px solid #333;
	}

	.background {
		background: url(http://img4.duitang.com/uploads/item/201410/14/20141014151107_hJ2me.jpeg) no-repeat;
		background-size: cover;
		height: 320px;
		width: 200px;
		padding: 20px;
		border: 10px dashed #333;
		margin: 30px;
		float: left;
	}
	.back-1 {
		background-clip: border-box;
	}
	.back-2 {
		background-clip: padding-box;
	}
	.back-3 {
		background-clip: content-box;
	}

	.back-11 {
		background-origin: border-box;
	}
	.back-12 {
		background-origin: padding-box;
	}
	.back-13 {
		background-origin: content-box;
	}

	.gradient {
		height: 68px;
		margin-bottom: 12px;
	}
	.gradient-1 {
		background: linear-gradient(red, blue);
	}
	.gradient-2 {
		background: linear-gradient(45deg, red, blue);
	}
	.gradient-3 {
		background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
		padding: 12px;
	}
	.radial-gradient {
		height: 200px;
		width: 200px;
		border-radius: 50%;
		background: radial-gradient(red, green, blue);
	}
	.radial-gradient-2 {
		height: 200px;
		width: 200px;
		border-radius: 50%;
		background: radial-gradient(red 5%, green 15%, blue 60%);
	}

	.box-magic {
		width: 250px;
		height: 42px;
		text-align: center;
		line-height: 42px;
		border: 1px solid red;
		border-radius: 5px;
		clear: both;
		display: block;
		background: lightgoldenrodyellow;
	}
	.box-magic:hover {
		background: yellow;
		cursor: pointer;
	}

	.shadow {
		height: 80px;
		width: 80px;
		margin: 30px;
		float: left;
	}
	.shadow-1 { box-shadow: red 0 0 30px 10px;  }
	.shadow-2 { box-shadow: red 0 0 30px 10px inset; }
	.shadow-3 { box-shadow: red 10px 10px 30px 10px inset; }
	.shadow-4 { box-shadow: red 10px 0 30px 10px; }
	.shadow-5 { box-shadow: red 0 0 30px 10px inset; }

	.rotate { transform: rotate(17deg) }
	.rotate-1 { transform: rotateX(30deg) }


</style>
<body>
<h1>《CSS 高效开发实战》 学习笔记</h1>
<h3>目标伪类 :target</h3>
<a href="#a1">turn to content 1</a>
<a href="#a2">turn to content 2</a>

<h3>否定伪类 :not</h3>
<div class="not">
	<p class="not-1">not-1</p>
	<p class="not-2">not-121</p>
	<p class="not-3">not-23451</p>
</div>

<h2>更炫酷的字体</h2>
<h3>字体阴影</h3>
<p class="shadow-1">Hello World!光晕效果 </p>
<p class="shadow-2">Hello World!浮雕效果 </p>

<h3>字体描边</h3>
<p class="stroke">啊！美丽的中国，我的母亲！</p>

<h3>字体分栏</h3>
<p class="columns">
	1. 圣诞节发牢骚福建省，束带结发来上课的积分。束带结发路上看见发牢骚的积分流口水的房间，时间段来看福建省的李开复时间段。速度快放假圣诞快乐福建省的路口附近收代理费建设路口，举反例束带结发酸辣粉。圣诞节发牢骚福建省，束带结发来上课的积分。束带结发路上看见发牢骚的积分流口水的房间，时间段来看福建省的李开复时间段。速度快放假圣诞快乐福建省的路口附近收代理费建设路口，举反例束带结发酸辣粉。 2. 圣诞节发牢骚福建省，束带结发来上课的积分。束带结发路上看见发牢骚的积分流口水的房间，时间段来看福建省的李开复时间段。速度快放假圣诞快乐福建省的路口附近收代理费建设路口，举反例束带结发酸辣粉。圣诞节发牢骚福建省，束带结发来上课的积分。束带结发路上看见发牢骚的积分流口水的房间，时间段来看福建省的李开复时间段。 3. 速度快放假圣诞快乐福建省的路口附近收代理费建设路口，举反例束带结发酸辣粉。圣诞节发牢骚福建省，束带结发来上课的积分。束带结发路上看见发牢骚的积分流口水的房间，时间段来看福建省的李开复时间段。速度快放假圣诞快乐福建省的路口附近收代理费建设路口，举反例束带结发酸辣粉。圣诞节发牢骚福建省，束带结发来上课的积分。束带结发路上看见发牢骚的积分流口水的房间，时间段来看福建省的李开复时间段。速度快放假圣诞快乐福建省的路口附近收代理费建设路口，举反例束带结发酸辣粉。
</p>

<h3>图片背景的origin & clip 属性</h3>
<div class="background back-1"></div>
<div class="background back-2"></div>
<div class="background back-3"></div>

<div class="background back-11"></div>
<div class="background back-12"></div>
<div class="background back-13"></div>

<div  style="clear: both;"></div>

<h3>颜色渐变 - 线性渐变</h3>
<div class="gradient gradient-1">默认从上到下</div>
<div class="gradient gradient-2">从左到右</div>
<div class="gradient-tmp gradient-3">
	彩虹色效果（多颜色）彩虹色效果（多颜色）彩虹色效果（多颜色）彩虹色效果（多颜色）
	彩虹色效果（多颜色）彩虹色效果（多颜色）彩虹色效果（多颜色）彩虹色效果（多颜色）
	彩虹色效果（多颜色）彩虹色效果（多颜色）彩虹色效果（多颜色）彩虹色效果（多颜色）
</div>

<h3>颜色渐变 - 放射渐变</h3>
<div class="radial-gradient"></div>
<div class="radial-gradient-2"></div>

<h3>边框 - 阴影</h3>
<button class="box-magic">我是一个肌肤茉莉的按钮</button>
<div class="shadow shadow-1"></div>
<div class="shadow shadow-2"></div>
<div class="shadow shadow-3"></div>
<div class="shadow shadow-4"></div>
<div class="shadow shadow-5"></div>

<div  style="clear: both;"></div>



<h2>变换 - 动画</h2>

<style>
	.scale { transition: all 0.6s; }
	.scale:hover {
		transform: scale(1.2);
		cursor: pointer;
	}
	.translate {
		transform: translate(100px, 25px);
	}

	.transition {
		height: 50px;
		width: 120px;
		transition: width 1.2s, background-color 0.6s 1.2s;
		background-color: red;
		margin-bottom: 24px;
	}
	.transition:hover { width: 350px; background-color: yellow; }
	.keyframes {
		animation: spinY 4s infinite linear;
	}
	@keyframes spinY {
		from { transform: rotateY(0deg); }
		to { transform: rotateY(-360deg); }
	}

	.keyframes-1 {
		animation: spinA 4s infinite linear;
	}
	@keyframes spinA {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(-180deg); }
		50% { transform: rotate(-270deg); }
		75% { transform: rotate(-310deg); }
		100% { transform: rotate(-360deg); }
	}


</style>

<style>
	.mainBox {
		width: 1160px;
		background-color:red;
	}
	.mainBox:after{
		display: block;
		clear:both;
		height:0;
		content: "";
		visibility: hidden;
		overflow:hidden;
	}
	.leftBox {
		background-color:#C9F;
		width:740px;
		height: 300px;
		float: left;
	}
	.rightBox {
		background-color:#FCF;
		width:210px;
		height: 300px;
		margin-left:10px;
		float: left;
	}

</style>

<h3>旋转变换</h3>
<div>
	<div class="background-img rotate"></div>
	<div class="rotate-1">这里是文字，效果！</div>
</div>

<h3>scale 比例缩放</h3>
<p>鼠标移动到图片上看看效果....</p>
<div style="width: 200px; height: 320px; overflow: hidden;">
	<div class="background-img scale"></div>
</div>

<h3>位移变换 - translate</h3>
<div>
	<div class="background-img translate"></div>
</div>

<h3>交互动画 - transition</h3>
<div class="transition"></div>
<div class="background-img keyframes"></div>
<div class="background-img keyframes-1"></div>



<h3>after 清除浮动</h3>
<div class="mainBox">
	<div class="leftBox">
	</div>
	<div class="rightBox">
	</div>
	<!-- <div style="clear: both"></div> -->
	<!-- <span style="clear: both"></span> -->
</div>
<div>测试文字！</div>

</body>
</html>